<template>
  <div class="asset-list">
    <div class="asset-list-item" v-for="(item,index) in 7">
      <img src="@/assets/images/asset-icon.png" alt="" class="asset-list-item-icon"/>
      <div class="asset-list-item-content" ref="info" @click="goDetails">
        <div class="asset-list-item-title">企业经营洞察</div>
          <div class="tooltip-box">
            <a-tooltip
              content="我是简短的描述信息我是简短的描述信息我是简短的描述信息"
              placement="top"
              @mouseenter="showTooltip(index,$event,)"
            >
              <div  class="over-flow">
                <span  :class="{'desc':isShowArr[index],'defalutInfo':true}" >{{ '我是简短的描述信息我是简短的描述信息我是简短的描述信息' || '-' }}</span>
              </div>
            </a-tooltip>
          </div>
      </div>
      <img src="@/assets/images/arrow-right-icon.png" alt="" class="asset-list-item-arrow"/>
    </div>
  </div>
</template>

<script setup lang=ts>
import { nextTick, onMounted, ref } from 'vue';
let isShow = ref(false)
const boxRefs = ref<HTMLElement[]>([])
let aaa = ref(false)
let dom0 = ref(null)
let isShowArr = ref([false,false,false,false,false,false,false])
let domArr = document.getElementsByClassName("asset-list-item-content")
let spanDom = document.getElementsByClassName("defalutInfo")

onMounted(()=>{
  nextTick(()=>{
    // console.log(dom,'dom')
    isShowArr.value.forEach((item,index)=>{
      if(domArr[index].clientWidth > spanDom[index]?.clientWidth){
        console.log('---')
        isShowArr.value[index] = false
      }else{
        console.log('===')
        isShowArr.value[index] = true
      }
    })
  })
  
})

const showTooltip = (index,e)=>{
  console.log(domArr[index].clientWidth)
  console.log(spanDom[index]?.clientWidth)
  if(domArr[index].clientWidth > spanDom[index]?.clientWidth){
    if(e && e.target){
      e.target.style.pointerEvents = 'none'
    }
  }
} 
const goDetails = ()=>{
  console.log('goDetails')
}
</script>
<style lang="less" scoped>
.asset-list{
  display: flex;
  flex-wrap: wrap;
  padding: 20px 24px;
  padding-left: 16px;
}
.asset-list-item{
  display: flex;
  align-items: center;
  width: calc((100% - 32px) / 3);
  height: 88px;
  margin-right: 16px;
  margin-bottom: 29px;
  padding: 0 20px;
  border: 1px solid #EBF0FA;
  border-radius: 8px;
  cursor: pointer;
  &:nth-child(3n){
    margin-right: 0;
  }
  &:hover{
    background-color: #EBF0FA;
  }
}
.asset-list-item-icon{
  width: 48px;
  height: 48px;;
  flex-shrink: 0;
  margin-right: 12px;
}
.asset-list-item-content{
  flex: 1;
  width: 0;
  margin-right: 12px;
  
}
.asset-list-item-arrow{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.asset-list-item-title{
  font-size: 16px;
  font-weight: 700;
  color: #465A80;
  line-height: 1.4;
}
.asset-list-item-desc{
  width: 100%;
  color: #A3B0CC;
  margin-top: 2px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.over-flow{
  width: 100%;
  overflow: hidden;
}

.desc{
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.defalutInfo{
  display: inline-block;
  white-space: nowrap;
}
</style>